<template>
	<view class="fixed-footer">
		<view class="fixed-footer__placeholder" :style="{ height: footerHeight + 'px' }"></view>
		<view class="fixed-footer__inner">
			<view class="fixed-footer__content">
				<slot></slot>
			</view>
			<safe-area-insets-bottom></safe-area-insets-bottom>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		getCurrentInstance,
		ref
	} from 'vue';
	const footerHeight = ref(0);

	const setHeight = async () => {
		const instance = getCurrentInstance();
		const {
			height
		} = await instance.ctx.$uGetRect('.fixed-footer__inner');
		footerHeight.value = height;
	}

	onMounted(() => {
		setHeight();
	})
</script>

<style lang="scss" scoped>
	.fixed-footer {
		&__inner {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 3000;
		}

		&__content {
			padding: 24rpx 32rpx;
		}
	}
</style>